<!--  -->
<template>
<div>
  <PageTitle name="修改密码">
      <!-- <el-button type="primary" @click="editFn()">添加权限</el-button> -->
    </PageTitle>
<div class="formBox">
    <el-form ref="formRef"  label-width="80px" :model="formData" :rules="rules" @submit.prevent>
      <el-form-item label="用户名" >
        <el-input v-model="formData.userName" readonly autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="formData.type" readonly autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="formData.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          v-model="formData.checkPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
    </div>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
let store = useStore();
const nickName = store.state.user.userInfo.nickName
const type=store.state.user.userInfo.type
import { ref, reactive, getCurrentInstance, defineEmits } from 'vue'
const emit = defineEmits(['upData'])
const {proxy} = getCurrentInstance()
const title = ref('注册')
let id = null
const dialogVisible = ref(false)
const formRef = ref(null)
const formData = reactive({
  userName:nickName,
  type:type,
  pass:'',
  checkPass:''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (formData.checkPass !== '') {
      if (!formRef.value) return
      formRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== formData.pass) {
    callback(new Error("请输入两次一样的密码"))
  } else {
    callback()
  }
}
const rules = reactive({
    pass: [{required: true, validator: validatePass, trigger: 'blur' }],
  checkPass: [{required: true, validator: validatePass2, trigger: 'blur' }],
})

const show =(row)=>{
    id = row.staffId
    dialogVisible.value = true
    if(row.permission){
      formData.checkbox=row.permission.split(',')
    }
}

const submitForm = () => {
  formRef.value.validate(valid => {
    if (!valid) return
    proxy.$message({
        type: "success",
        message: "操作成功",
      });
      resetForm()

  })
}

const resetForm = () => {
    dialogVisible.value = false
    formRef.value.resetFields()
    formData.pass = ''
    formData.checkPass = ''
}

const clear = (data) => {
  const keys = Object.keys(data);
  let obj = {};
  keys.forEach((item) => {
    obj[item] = "";
  });
  Object.assign(data, obj);
};

defineExpose({ show })
</script>
<style lang='scss' scoped>
.formBox{
  width: 600px;
  margin: 24px auto;
}
</style>